<template>
  <Search
    v-model="value"
    :show-action="false"
    placeholder="商机名称、商机ID、BD工号快速搜索"
    @search="onSearch"
    @clear="clear"
    class="Field flex items-center ml-14px"
  >
    <template #left-icon>
      <VanImage :src="src" class="VanImage"></VanImage>
    </template>
    <template #right-icon>
      <span class="close" v-show="close" @click="back">取消</span>
    </template>
  </Search>
</template>

<script>
import { Search, Image as VanImage } from "vant";
export default {
  props: {
    placeholder: {
      type: String,
      default: "",
    },
    valuemodel: {
      type: String,
    },
    close: {
      default: false,
    },
  },
  components: {
    Search,
    VanImage,
  },
  data() {
    return {
      value: "",
      src: require("@/assets/icon/icon_navbar_search.png"),
    };
  },
  methods: {
    onSearch() {
      this.$emit("onSearch", this.value);
    },
    setValue(val) {
      this.value = val;
    },
    clear() {
      this.value = "";
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.Field {
  height: 40px;
  width: 347px;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 0;
  .van-search__content {
    background-color: transparent;
    padding-left: 8px;
  }
  ::v-deep .van-field__left-icon {
    align-items: center;
    justify-content: center;
    display: flex;
    margin-right: 4px;
  }
  .VanImage {
    width: 14px;
    height: 14px;
  }
  .close {
    color: #666666;
  }
}
</style>
